<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>智能方案 - 766 SMART HOME</title>
<meta name="author" content="BIZ Team" />
<meta name="copyright" content="BIZ" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="${base}/resources/shop/css/product.css" rel="stylesheet" type="text/css" />
<link href="${base}/resources/shop/css/customer.css" rel="stylesheet" type="text/css" />

<link href="${base}/resources/shop/css/bootstrap.min.css" rel="stylesheet">
<!-- 顶部的CSS样式 -->
<link href="${base}/resources/shop/css/head.css" rel="stylesheet">
<link href="${base}/resources/shop/css/home.css" rel="stylesheet">
<!-- 底部的CSS样式 -->
<link href="${base}/resources/shop/css/footer.css" rel="stylesheet">
<!-- 自己定义的CSS样式 -->
<link href="${base}/resources/shop/css/product_list.css" rel="stylesheet">
<link href="${base}/resources/shop/css/common_product.css" rel="stylesheet">

<script type="text/javascript" src="${base}/resources/shop/js/jquery.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/common.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/common_another.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/public.js"></script>

</head>
<body>
	[#include "/shop/include/ng_header.ftl" /]
	<div class="container productList">
		<div class="span24 last">
			<div class="path">
				<ul>
					<li>
						<a href="${base}/">${message("shop.path.home")}</a>
					</li>
					[#if productCategory??]
						[@product_category_parent_list productCategoryId = productCategory.id]
							[#list productCategories as productCategory]
								<li>
									<a href="${base}${productCategory.path}">${productCategory.name}</a>
								</li>
							[/#list]
						[/@product_category_parent_list]
						<li class="last">${productCategory.name}</li>
					[#else]
						<li class="last">${message("shop.product.title")}</li>
					[/#if]
					[#-- <li class="last">智能方案</li>   --]
					<form id="productForm" action="list.jhtml" method="get">
						<input type="hidden" id="brandId" name="brandId" value="${(brand.id)!}" />
						<input type="hidden" id="promotionId" name="promotionId" value="${(promotion.id)!}" />
						<input type="hidden" id="orderType" name="orderType" value="${orderType}" />
						<input type="hidden" name="type" value="${type}" />
						<input type="hidden" id="pageNumber" name="pageNumber" value="${page.pageNumber}" />
						<input type="hidden" id="pageSize" name="pageSize" value="${page.pageSize}" />
						<span class="page"> 
							<label>${message("shop.product.totalCount", page.total)} </label>
						</span>
					</form>
				</ul>
			</div>
				<div id="filter" class="filter">
					<div class="title">筛选</div>
					<div class="content clearfix">
						<dl class="last">
							<dt>
								<input type="hidden" id="acreage" name="acreage" value="${acreage}"/>
								<span title="">面积:</span>
							</dt>
							[#list areaTags as at]
								<dd>
									<a href="javascript:;" [#if at.id == acreage] class="areaTag current"[#else] class="areaTag"[/#if] title="${at.title}" areaTag="${at.id}">${at.title}</a>
								</dd>
							[/#list]
							<dd class="moreOption" title="${message("shop.product.moreOption")}">&nbsp;</dd>
						</dl>
						<dl class="last">
								<dt>
									<input type="hidden" name="attribute" value="${attribute}"/>
									<span title="">属性:</span>
								</dt>
								[#list schemeAttrs as attr]
									<dd>
										<a href="javascript:;" [#if attr.id == attribute] class="attribute current"[#else] class="attribute"[/#if] title="${attr.title}" attributeId="${attr.id}">${attr.title}</a>
									</dd>
								[/#list]
								<dd class="moreOption" title="${message("shop.product.moreOption")}">&nbsp;</dd>
							</dl>
							
							<dl class="last">
								<input type="hidden" id="brandId" name="brandId" value="${brandId}"/>
								<dt>${message("shop.product.brand")}:</dt>
								[#list brands as brand]
									<dd>
										<a href="javascript:;" [#if brand.id == brandId] class="brand current"[#else] class="brand"[/#if] title="${brand.name}" brandId="${brand.id}">${brand.name}</a>	
									</dd>
								[/#list]
								<dd class="moreOption" title="${message("shop.product.moreOption")}">&nbsp;</dd>
							</dl>
							[#if type==14]
							<dl class="last">
								<input type="hidden" id="auxiliaryId" name="auxiliaryId" value="${auxiliaryId}"/>
								<dt>主材${message("shop.product.brand")}:</dt>
								[#list brandsAuxiliary as auxiliary]
									<dd>
										<a href="javascript:;" [#if auxiliary.id == auxiliaryId] class="brand current"[#else] class=""[/#if] title="${auxiliary.name}" name="brandAuxiliaryId" auxiliaryId="${auxiliary.id}">${auxiliary.name}</a>	
									</dd>
								[/#list]
								<dd class="moreOption" title="${message("shop.product.moreOption")}">&nbsp;</dd>
							</dl>
							[/#if]
					</div>
					<div id="moreFilter" class="moreFilter">
						[#if rows > 3]
							<a href="javascript:;">${message("shop.product.moreFilter")}</a>
						[#else]
							&nbsp;
						[/#if]
					</div>
				</div>
				<div class="bar">
					<div id="layout" class="layout">
						[#-- <label>${message("shop.product.layout")}:</label>  --]
						[#-- 
						<label class="font-yellow">综合排序 </label> 
						<div id="sort" class="sort"> --]	
							[#-- 不清楚这个里面是否有orderType，这部分可以不用 --]
							[#-- 
							<div id="orderSelect" class="orderSelect">
								[#if orderType??]
									<span>${message("Product.OrderType." + orderType)}</span>
								[#else]
									<span>${message("Product.OrderType." + orderTypes[0])}</span>
								[/#if]
								<div class="popupMenu">
									<ul>
										[#list orderTypes as ot]
											<li>
												<a href="javascript:;"[#if ot == orderType] class="current" title="${message("shop.product.cancel")}"[/#if] orderType="${ot}">${message("Product.OrderType." + ot)}</a>
											</li>
										[/#list]
									</ul>
								</div>
							</div>
							  --]
							[#-- <a href="javascript:;"[#if orderType == "priceAsc"] class="currentAsc current" title="${message("shop.product.cancel")}"[#else] class="asc"[/#if] orderType="priceAsc">${message("shop.product.priceAsc")}</a>
							<a href="javascript:;"[#if orderType == "salesDesc"] class="currentDesc current" title="${message("shop.product.cancel")}"[#else] class="desc"[/#if] orderType="salesDesc">${message("shop.product.salesDesc")}</a>
							<a href="javascript:;"[#if orderType == "scoreDesc"] class="currentDesc current" title="${message("shop.product.cancel")}"[#else] class="desc"[/#if] orderType="scoreDesc">${message("shop.product.scoreDesc")}</a>
							<input type="text" id="startPrice" name="startPrice" class="startPrice" value="${startPrice}" maxlength="16" title="${message("shop.product.startPrice")}" onpaste="return false" />-<input type="text" id="endPrice" name="endPrice" class="endPrice" value="${endPrice}" maxlength="16" title="${message("shop.product.endPrice")}" onpaste="return false" />
							<button type="submit">${message("shop.product.submit")}</button>
						</div>
						 --]					
						<div id="layout-type">
							<label>${message("shop.product.layout")}:</label> 
							<a href="javascript:;" id="tableType"
								class="tableType"> <span>&nbsp;</span>
							</a> <a href="javascript:;" id="listType" class="listType"> <span>&nbsp;</span>
							</a>
						</div>
						<span class="page">
							<label>< ${page.pageNumber}/[#if page.totalPages > 0]${page.totalPages}[#else]1[/#if] ></label>
							[#if page.totalPages > 0]
								[#if page.pageNumber != 1]
									<a href="javascript:;" id="previousPage" class="previousPage">
										<span>${message("shop.product.previousPage")}</span>
									</a>
								[/#if]
								[#if page.pageNumber != page.totalPages]
									<a href="javascript:;" id="nextPage" class="nextPage">
										<span>${message("shop.product.nextPage")}</span>
									</a>
								[/#if]
							[/#if]
						</span>
					</div>
				</div>
				<div id="result" class="result table clearfix">
					[#if page.content?has_content]
						<ul>
							[#list page.content as scheme]
								<li>
									<a href="${base}/shop/scheme/content.jhtml?id=${scheme.id}" target="_blank">
										<div>
											<img src="${base}/upload/image/blank.gif" width="170" height="170" data-original="[#if scheme.image??]${scheme.image}[#else]${setting.defaultThumbnailProductImage}[/#if]" />
										</div>	
									</a>
									<span id="commodity-title" title="${scheme.name}" class='commodity-title'>${abbreviate(scheme.name, 60)}</span>
									<span class="price">
										${currency(scheme.price, true)}
									</span>
									<div class="classified-goods-cart" data-goodid="${product.id}" data-type="1">
                       					<span class="text-center">加入购物车</span>
                   					</div>
								</li>
							[/#list]
						</ul>
					[#else]
						${message("shop.product.noListResult")}
					[/#if]
				</div>
				[@pagination pageNumber = page.pageNumber totalPages = page.totalPages pattern = "javascript: $.pageSkip({pageNumber});"]
					[#include "/shop/include/pagination.ftl"]
				[/@pagination]
		</div>
	</div>
	[#include "/shop/include/ng_footer.ftl" /]
<script type="text/javascript" src="${base}/resources/shop/js/jQuery-jcContact.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.js"></script>
<script type="text/javascript" src="/resources/shop/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/resources/shop/js/home.js"></script>

<script type="text/javascript">
$().ready(function() {

	var $productForm = $("#productForm");
	var $brandId = $("#brandId");
	var $brandAuxiliaryId = $("[name=brandAuxiliaryId]");
	var $auxiliaryId = $("[name=auxiliaryId]").val();
	var $promotionId = $("#promotionId");
	var $orderType = $("#orderType");
	var $pageNumber = $("#pageNumber");
	var $pageSize = $("#pageSize");
	var $filter = $("#filter dl");
	var $lastFilter = $("#filter dl:eq(2)");
	var $hiddenFilter = $("#filter dl:gt(2)");
	var $moreOption = $("#filter dd.moreOption");
	var $moreFilter = $("#moreFilter a");
	var $tableType = $("#tableType");
	var $listType = $("#listType");
	var $orderSelect = $("#orderSelect");
	var $brand = $("#filter a.brand");
	var $attribute = $("#filter a.attribute");
	var $previousPage = $("#previousPage");
	var $nextPage = $("#nextPage");
	var $size = $("#layout a.size");
	var $tagIds = $("input[name='tagIds']");
	var $sort = $("#sort a");
	var $startPrice = $("#startPrice");
	var $endPrice = $("#endPrice");
	var $result = $("#result");
	var $productImage = $("#result img");
	var $acreage = $("#acreage");
	var $areaTag = $("#filter a.areaTag");
	
	$filter.each(function() {
		var $this = $(this);
		var height = $this.height();
		if (height > 30) {
			$this.find("dt").height(height);
			if ($this.find("a.current").size() == 0) {
				$this.height(30);
				$this.find(".moreOption").show();
			}
		}
	});
	
	$moreOption.click(function() {
		var $this = $(this);
		if ($this.hasClass("close")) {
			$this.removeClass("close");
			$this.attr("title", "${message("shop.product.moreOption")}");
			$this.parent().height(30);
		} else {
			$this.addClass("close");
			$this.attr("title", "${message("shop.product.closeOption")}");
			$this.parent().height("auto");
		}
	});
	
	$moreFilter.click(function() {
		var $this = $(this);
		if ($this.hasClass("close")) {
			$this.removeClass("close");
			$this.text("${message("shop.product.moreFilter")}");
			$lastFilter.addClass("last");
			$hiddenFilter.hide();
		} else {
			$this.addClass("close");
			$this.text("${message("shop.product.closeFilter")}");
			$lastFilter.removeClass("last");
			$hiddenFilter.show();
		}
	});
	
	$brand.click(function() {
		var $this = $(this);
		if ($this.hasClass("current")) {
			$brandId.val("");
		} else {
			$brandId.val($this.attr("brandId"));
		}
		$pageNumber.val(1);
		$productForm.submit();
		return false;
	});
	$brandAuxiliaryId.click(function() {
		var $this = $(this);
		var auxiliaryId = $(this).attr("auxiliaryId");
		if($this.hasClass("current")){
			$("[name=auxiliaryId]").val("");
		}else{
			$("[name=auxiliaryId]").val(auxiliaryId);
		}
		$pageNumber.val(1);
		$productForm.submit();
		return false;
	});
	$areaTag.click(function() {
		var $this = $(this);
		if ($this.hasClass("current")) {
			$acreage.val("");
		} else {
			$acreage.val($this.attr("areaTag"));
		}
		$pageNumber.val(1);
		$productForm.submit();
		return false;
	});
	
	$attribute.click(function() {
		var $this = $(this);
		if ($this.hasClass("current")) {
			$this.closest("dl").find("input").prop("disabled", true);
		} else {
			$this.closest("dl").find("input").prop("disabled", false).val($this.attr("attributeId"));
		}
		$pageNumber.val(1);
		$productForm.submit();
		return false;
	});
	
	var layoutType = getCookie("layoutType");
	if (layoutType == "listType") {
		$listType.addClass("currentList");
		$result.removeClass("table").addClass("list");
	} else {
		$tableType.addClass("currentTable");
		$result.removeClass("list").addClass("table");
	}
	
	$tableType.click(function() {
		var $this = $(this);
		if (!$this.hasClass("currentTable")) {
			$this.addClass("currentTable");
			$listType.removeClass("currentList");
			$result.removeClass("list").addClass("table");
			addCookie("layoutType", "tableType", {path: "${base}/"});
		}
	});
	
	$listType.click(function() {
		var $this = $(this);
		if (!$this.hasClass("currentList")) {
			$this.addClass("currentList");
			$tableType.removeClass("currentTable");
			$result.removeClass("table").addClass("list");
			addCookie("layoutType", "listType", {path: "${base}/"});
		}
	});
	
	$size.click(function() {
		var $this = $(this);
		$pageNumber.val(1);
		$pageSize.val($this.attr("pageSize"));
		$productForm.submit();
		return false;
	});
	
	$previousPage.click(function() {
		$pageNumber.val(${page.pageNumber - 1});
		$productForm.submit();
		return false;
	});
	
	$nextPage.click(function() {
		$pageNumber.val(${page.pageNumber + 1});
		$productForm.submit();
		return false;
	});
	
	$orderSelect.mouseover(function() {
		var $this = $(this);
		var offset = $this.offset();
		var $menuWrap = $this.closest("div.orderSelect");
		var $popupMenu = $menuWrap.children("div.popupMenu");
		$popupMenu.css({left: offset.left, top: offset.top + $this.height()}).show();
		$menuWrap.mouseleave(function() {
			$popupMenu.hide();
		});
	});
	
	$tagIds.click(function() {
		$pageNumber.val(1);
		$productForm.submit();
	});
	
	$sort.click(function() {
		var $this = $(this);
		if ($this.hasClass("current")) {
			$orderType.val("");
		} else {
			$orderType.val($this.attr("orderType"));
		}
		$pageNumber.val(1);
		$productForm.submit();
		return false;
	});
	
	$startPrice.add($endPrice).focus(function() {
		$(this).siblings("button").show();
	});
	
	$startPrice.add($endPrice).keypress(function(event) {
		var $this = $(this);
		var key = event.keyCode?event.keyCode:event.which;
		if (key == 13 || (key >= 48 && key <= 57) || (key == 46 && $this.val().indexOf(".") == -1)) {
			return true;
		} else {
			return false;
		}
	});
	
	$productForm.submit(function() {
		if ($brandId.val() == "") {
			$brandId.prop("disabled", true)
		}
		if($("[name=auxiliaryId]").val() == ""){
			$(this).prop("disabled",true);
		}
		if ($promotionId.val() == "") {
			$promotionId.prop("disabled", true)
		}
		if ($orderType.val() == "" || $orderType.val() == "topDesc") {
			$orderType.prop("disabled", true)
		}
		if ($pageNumber.val() == "" || $pageNumber.val() == "1") {
			$pageNumber.prop("disabled", true)
		}
		if ($pageSize.val() == "") {
			$pageSize.prop("disabled", true)
		}
		if ($startPrice.val() == "" || !/^\d+(\.\d+)?$/.test($startPrice.val())) {
			$startPrice.prop("disabled", true)
		}
		if ($endPrice.val() == "" || !/^\d+(\.\d+)?$/.test($endPrice.val())) {
			$endPrice.prop("disabled", true)
		}
	});
	
	$productImage.lazyload({
		threshold: 100,
		effect: "fadeIn"
	});
	
	$.pageSkip = function(pageNumber) {
		$pageNumber.val(pageNumber);
		$productForm.submit();
		return false;
	}
	
});
</script>
</body>
</html>